<template>
    <div class="top-bar" :class="{'show-top-bat':leftBarShow}">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">

            <el-menu-item index="0" @click="onBarShow"><i class="el-icon-s-fold"></i></el-menu-item>

            <el-menu-item index="1">
                <el-breadcrumb separator="/" class="bread-crumb">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$route.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-menu-item>

            <el-submenu index="3" class="user-token">
                <template slot="title">
                    <div class="demo-fit">
                        <div class="block">
                            <el-avatar shape="square" :size="40"><img :src="user.userImage"></el-avatar>
                        </div>
                    </div>
                </template>
                <el-menu-item @click="isShowUser = true">个人中心</el-menu-item>
                <el-menu-item @click="isShowPassword = true">账户管理</el-menu-item>
                <el-menu-item @click="logout">退出登陆</el-menu-item>
            </el-submenu>
            <el-menu-item index="2" class="user-name">
                欢迎您:<span style="color: #1A1A1A;margin-left: 10px">{{user.userNick}}</span>
            </el-menu-item>
        </el-menu>

        <el-dialog title="个人中心" :visible.sync="isShowUser" width="70%" v-if="isShowUser"><!--关闭窗口时v-if及时销毁组件-->
            <personal-form @onUpdateSuccess="onUpdateSuccess" @editDataBoxClose="isShowUser = false"/>
        </el-dialog>

        <el-dialog title="修改密码" :visible.sync="isShowPassword" width="70%" v-if="isShowPassword"><!--关闭窗口时v-if及时销毁组件-->
            <edit-password @onUpdatePasswordSuccess="onUpdatePasswordSuccess" @editPasswordDataBoxClose="isShowPassword = false"/>
        </el-dialog>

    </div>
</template>

<script>

    import New from '@/js/eventBus.js'
    import loginApi from '@/api/login/loginApi'
    import personalForm from '@/views/personal/PersonalForm'
    import editPassword from '@/views/personal/EditPassword'

    export default {
        name: "TopBar",
        components:{
            editPassword,
            personalForm
        },
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                leftBarShow:false,
                user:this.$store.getters.getCmsUser,
                isShowUser:false,
                isShowPassword:false,
            };
        },
        methods: {
            onUpdatePasswordSuccess(res){
                this.isShowPassword = false
                this.$message.success("保存成功")
            },
            async onUpdateSuccess(res){
                this.isShowUser = false
                await this.$store.dispatch("SetCmsUser")
                this.user = this.$store.getters.getCmsUser
                this.$message.success("保存成功")
            },
             logout(){
                this.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await loginApi.userLogout();
                    this.$message.success("退出成功！返回登陆页面")
                    this.$store.commit('CLEAR_USER')
                    localStorage.clear()
                    this.$router.push('/login')
                })
            },
            onBarShow(){
                this.leftBarShow=!this.leftBarShow
                New.$emit("on-left-bar", this.leftBarShow);
                New.$emit("on-top-tabs", this.leftBarShow);
            },

        },
    }
</script>

<style scoped>
    .top-bar{
        float: left;
        width: calc(100% - 201px);
        height: 55px;
        margin-left: 201px;
        transition: 0.38s;
        -moz-transition: 0.38s;
        -o-transition: 0.38s;
    }
    .show-top-bat{
        width: calc(100% - 65px);
        margin-left: 65px;
        transition: 0.38s;
        -moz-transition: 0.38s;
        -o-transition: 0.38s;
    }
    top-bar ul,li{
        height: 55px !important;
    }
    .block{
        margin: 0px;
    }

    .el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-menu-item.is-active{
        border-bottom: 0px;
    }
    .bread-crumb{
        line-height: 60px;
    }
    .user-token{
        float: right;
        margin-right: 50px;
        width: 100px;
    }
    .user-name{
        float: right;
    }

</style>